<template>
    <div class="carousel-container slider-content">
        <div class="carousel-wrapper" :style="{ transform: `translateX(${offset}px)` }">
            <div class="carousel-slide" v-for="(slide, index) in extendedSlides" :key="index"
                :style="'background-image: ' + 'url(' + slide.image + ');'">
                <div class="container">
                    <div class="text-box ">
                        <div class="sl-title">{{ slide.name }}</div>
                        <h1 class="sl-sub-title" v-html="slide.description"></h1>
                        <!-- <div class="smart-campus">智慧校园</div> -->
                    </div>
                </div>
            </div>
        </div>
        <button @click="prevSlide" class="carousel-control prev animate__animated animate__fadeInLeft">&#10094;</button>
        <button @click="nextSlide"
            class="carousel-control next animate__animated animate__fadeInRight">&#10095;</button>
    </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import images1 from '@/assets/images/z2-1.jpg'
import images2 from '@/assets/images/z2-2.jpg'
import images3 from '@/assets/images/z2-3.jpg'
import { getBannerPublicList } from '@/api/api.js';
const slides = ref([
    { name: '从这里走向世界和未来', description: 'The Access to <br>the World <br>and the Future', image: images1 },
    { name: '从这里走向世界和未来', description: 'The Access to <br>the World <br>and the Future', image: images2 },
    { name: '从这里走向世界和未来', description: 'The Access to <br>the World <br>and the Future', image: images3 },
    // 更多幻灯片...
]);

const slideWidth = ref(0);
const currentIndex = ref(0);
const offset = computed(() => -currentIndex.value * slideWidth.value);
const extendedSlides = computed(() => {
    return [
        ...slides.value,
        ...slides.value, // 复制整个幻灯片数组
    ];
});
const nextSlide = () => {
    stopAutoPlay();
    currentIndex.value++;
    if (currentIndex.value >= slides.value.length) {
        // 当到达副本时，立即重置索引
        currentIndex.value = 0;
    }
    startAutoPlay()
};

const prevSlide = () => {
    stopAutoPlay();
    currentIndex.value--;
    if (currentIndex.value < 0) {
        // 当到达副本时，立即重置索引
        currentIndex.value = slides.value.length - 1;
    }
    startAutoPlay();
};
const autoPlayInterval = ref(null); // 定时器引用

// 自动播放函数
const startAutoPlay = () => {
    autoPlayInterval.value = setInterval(nextSlide, 3000); // 每3秒切换一次
};
// 停止自动播放函数
const stopAutoPlay = () => {
    if (autoPlayInterval.value) {
        clearInterval(autoPlayInterval.value);
    }
};
const updateSlideWidth = () => {
    slideWidth.value = document.querySelector('.carousel-slide').offsetWidth;
};

onMounted(() => {
    getBannerPublicList().then((res)=>{
        slides.value= res.data.map((item)=>{
            return{
                name: item.title,
                description: item.content,
                image: item.cover
            }
        })
        updateSlideWidth();
    window.addEventListener('resize', updateSlideWidth);
    startAutoPlay();
    })
  
});

onUnmounted(() => {
    stopAutoPlay();
    window.removeEventListener('resize', updateSlideWidth);
});
</script>

<style scoped lang="scss">
.container {
    padding-left: 15px;
    padding-right: 15px
}

.slider-content .sl-title {
    font-size: 40px;
    line-height: 50px;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 4px solid #eea522;
    display: inline-block;
    color: #fff;
}

.slider-content {
    button {
        display: none;
    }
}

.slider-content:hover {
    button {
        display: block;
        transition: transform 0.5s ease-in-out;
    }
}

.carousel-container {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.carousel-wrapper {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.carousel-slide {
    min-width: 100%;
    box-sizing: border-box;
    position: relative;

    .text-box {
        padding: 250px 0px;

        .sl-sub-title {
            color: #fff;
            font-size: 32px;
            line-height: 42px;
            font-family: 'Nunito', "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif;
            margin-bottom: 30px;
            max-width: 400px;
        }

        .smart-campus {
            padding: 10px 40px;
            font-size: 18px;
            border: 0;
            border-radius: 3px;
            display: inline-block;
            text-transform: capitalize;
            font-size: 16px;
            font-family: 'Nunito', "PingFang SC", "Microsoft YaHei", "Helvetica Neue", "Hiragino Sans GB", "WenQuanYi Micro Hei", Arial, sans-serif;
            font-weight: 500;
            color: #fff;
            background: #eea522;
            position: relative;
            overflow: hidden;
        }

        .smart-campus:hover {
            background: #1e95ba;
            color: #fff;
            cursor: pointer;
        }
    }
}

.carousel-control {
    position: absolute;
    top: 50%;
    width: 42px;
    height: 42px;
    line-height: 42px;
    border-radius: 50%;
    background: #eea522;
    text-align: center;
    color: #fff;
    transition: all .5s;
    cursor: pointer;
    border: 0px;
}

.carousel-control.prev {
    left: 10px;
}

.carousel-control.next {
    right: 10px;
}

.slider-content .carousel-slide {
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

@media only screen and (max-width: 1199px) {
    .text-box .sl-title {
        font-size: 30px !important;
        line-height: 1.2 !important;
    }

    .text-box .sl-sub-title {
        font-size: 26px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }
}

@media only screen and (max-width: 991px) {
    .text-box {
        padding: 200px 0 !important;
    }

    .sl-title {
        font-size: 30px !important;
        line-height: 1.1 !important;
        margin-bottom: 15px !important;
    }

    .text-box .sl-sub-title {
        font-size: 25px !important;
        line-height: 1.2 !important;
        margin-bottom: 15px !important;
    }

}

@media only screen and (max-width: 767px) {
    .text-box {
        padding: 175px 0 !important;
    }

    .slider-content .sl-title {
        font-size: 24px !important;
    }

    .text-box .sl-sub-title {
        font-size: 18px !important;
    }
}
</style>